<template>
	<div>
		<iframe src="app.html" class="mobile-simulation" ref="iframe" @load="load"></iframe>
		<div ref="content" class="mobile-simulation-content" style="overflow:scroll;height:100%;">
			<slot></slot>
		</div>
	</div>
</template>

<script>
export default {
	name:'MobileSimulation',
	data(){
		return {
			style:{
				height:'100%',
			}
		};
	},
	created(){
		this.ready=new Promise((resolve) => {
			this.resolve=resolve;
		});
		this.ready.then((doc) => {
			console.log('注入');
			doc.body.append(this.$refs.content);
			for(const style of document.styleSheets){
				doc.head.append(style.ownerNode.cloneNode(true));
			}
		});
		this.unWatch=this.$watch(function(){
			return this.$root.globalClass;
		},function(val,old){
			this.ready.then((doc) => {
				const classList=doc.body.classList;
				if(old){
					for(let i=0;i<old.length;++i){
						classList.remove(old[i]);
					}
				}
				for(let i=0;i<val.length;++i){
					classList.add(val[i]);
				}
			});
		},{immediate:true});
	},
	beforeDestroy(){
		this.unWatch();
	},
	methods:{
		load(){
			this.resolve(this.$refs.iframe.contentDocument);
		}
	}
};
</script>

<style lang="scss">
.mobile-simulation{
	outline:0;
	border:0;
	width:360px;
	height:600px;
	margin:20px;
	box-shadow:0 1px 6px rgb(0,0,0,.2);
	border-radius:5px;
}
.mobile-simulation-content{
	padding-bottom:10px;
}
</style>
